<template>
  <div>
    <textarea :id="id" v-model="content"></textarea>
  </div>
</template>

<script>
  // Import TinyMCE
  import tinymce from 'tinymce/tinymce';

  // A theme is also required
  import 'tinymce/themes/modern/theme';

  // Any plugins you want to use has to be imported
  import 'tinymce/plugins/advlist';
  import 'tinymce/plugins/wordcount';
  import 'tinymce/plugins/autolink';
  import 'tinymce/plugins/autosave';
  import 'tinymce/plugins/charmap';
  import 'tinymce/plugins/codesample';
  import 'tinymce/plugins/contextmenu';
  import 'tinymce/plugins/emoticons';
  import 'tinymce/plugins/fullscreen';
  import 'tinymce/plugins/hr';
  import 'tinymce/plugins/imagetools';
  import 'tinymce/plugins/insertdatetime';
  import 'tinymce/plugins/link';
  import 'tinymce/plugins/media';
  import 'tinymce/plugins/noneditable';
  import 'tinymce/plugins/paste';
  import 'tinymce/plugins/print';
  import 'tinymce/plugins/searchreplace';
  import 'tinymce/plugins/tabfocus';
  import 'tinymce/plugins/template';
  import 'tinymce/plugins/textpattern';
  import 'tinymce/plugins/visualblocks';
  import 'tinymce/plugins/anchor';
  import 'tinymce/plugins/autoresize';
  import 'tinymce/plugins/bbcode';
  import 'tinymce/plugins/code';
  import 'tinymce/plugins/colorpicker';
  import 'tinymce/plugins/directionality';
  import 'tinymce/plugins/fullpage';
  import 'tinymce/plugins/help';
  import 'tinymce/plugins/image';
  import 'tinymce/plugins/importcss';
  import 'tinymce/plugins/legacyoutput';
  import 'tinymce/plugins/lists';
  import 'tinymce/plugins/nonbreaking';
  import 'tinymce/plugins/pagebreak';
  import 'tinymce/plugins/preview';
  import 'tinymce/plugins/save';
  import 'tinymce/plugins/spellchecker';
  import 'tinymce/plugins/table';
  import 'tinymce/plugins/textcolor';
  import 'tinymce/plugins/toc';
  import 'tinymce/plugins/visualchars';

  import 'tinymce/skins/lightgray/skin.min.css'
  import 'tinymce/skins/lightgray/content.min.css'

  import '../../assets/tinymce/zh_CN.js'

  export default {
    name: 'tinymce',
    props: {
      'id': {
        type: String,
        required: true
      },
      'htmlClass': { default: '', type: String },
      'value': { default: '' },
      'plugins': { default: function() {
          return [
            'advlist autolink lists link image charmap print preview hr anchor pagebreak',
            'searchreplace wordcount visualblocks visualchars code fullscreen',
            'insertdatetime media nonbreaking save table contextmenu directionality',
            'template paste textcolor colorpicker textpattern imagetools toc help emoticons hr fontsizeselect'
          ];
        },
        type: Array
      },
      inline: { default: false },
      height: { default: 200 },
      language: { default: 'zh_CN' },
      menubar: { default: 'false' },
      toolbar1: { default: 'fullscreen |  bold italic  strikethrough fontsizeselect  forecolor backcolor pagebreak | table link image | alignleft aligncenter alignright alignjustify  | numlist bullist indent  | removeformat', type: String },
      toolbar2: { default: '', type: String },
      other_options: { default: function() { return {}; }, type: Object },
    },
    data() {
      return {
        content: '',
        editor: null,
        cTinyMce: null,
        checkerTimeout: null,
        isTyping: false
      };
    },
    mounted() {
      this.content = this.value;
      this.init();
      console.log('init editor....');
    },
    beforeDestroy () {
      console.log('destroy editor....');
      this.editor.destroy();
    },
    watch: {
      value: function (newValue) {
        if (!this.isTyping) {
          if (this.editor !== null) { this.editor.setContent(newValue); } else { this.content = newValue; }
        }
      }
    },
    methods: {
      init() {
        let vm = this;
        let options = {
          selector: '#' + this.id,
          skin: false,
          language: this.language,
          menubar: this.menubar,
          toolbar1: this.toolbar1,
          toolbar2: this.toolbar2,
          plugins: this.plugins,
          inline: this.inline,
          height: this.height,
          branding: false,
          elementpath: false,
          images_upload_url: 'true',
          image_advtab: true,
          paste_data_images: true,
          table_default_styles: {
            width: '100%',
            borderCollapse: 'collapse'
          },
          init_instance_callback: (editor) => {
            this.editor = editor;
            editor.on('KeyUp', (e) => {
              this.submitNewContent();
            });
            editor.on('Change', (e) => {
              if (this.editor.getContent() !== this.value) {
                this.submitNewContent();
              }
            });
            editor.on('init', (e) => {
              editor.setContent(this.content);
              this.$emit('input', this.content);
            });
          },
          images_upload_handler: function (blobInfo, success, failure) {
            let formData = new FormData();
            formData.append('file', blobInfo.blob(), blobInfo.filename());
//            const config = {
//              headers: { 'Content-Type': 'multipart/form-data' }
//            };
            vm.$http.post('/common/file/upload', formData).then(resp => {
              if (resp.code === 200) {
                success(resp.data.location);
              } else {
                failure('file upload failed: ' + resp);
              }

            }).catch(err => {
              failure('file upload failed: ' + err);
            })
          }
        };
        tinymce.init(this.concatAssciativeArrays(options, this.other_options));
      },
      concatAssciativeArrays(array1, array2) {
        if (array2.length === 0) return array1;
        if (array1.length === 0) return array2;
        let dest = [];
        for (let key in array1) dest[key] = array1[key];
        for (let key in array2) dest[key] = array2[key];
        return dest;
      },
      submitNewContent() {
        this.isTyping = true;
        if (this.checkerTimeout !== null) { clearTimeout(this.checkerTimeout); }
        this.checkerTimeout = setTimeout(() => {
          this.isTyping = false;
        }, 300);

        this.$emit('input', this.editor.getContent());
      }
    }
  }
</script>

 <!--Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
